<template>
	<view class="container">
		<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
			 :data-current="index" @tap.stop="swichNav">
				<text class="tab-bar-title">{{item}}</text>
			</view>
		</scroll-view>
			<mescroll-uni :down="downOption" @down="downCallback" @up="upCallback" @init="mescrollInit">	
				<!--start 内容部分可直接删除-->
				<view class="list-view">
					<view class="row" v-for="(it,ind) in list" :key="ind">
						<view class="type" v-if="it.status==1">待付款</view>
						<view class="type" v-else-if="it.status==2">待发货</view>
						<view class="type" v-else-if="it.status==3">待收货</view>
						<view class="type" v-else-if="it.status==4">待评价</view>
						<view class="type" v-else-if="it.status==5">取消订单</view>
						<view class="type" v-else-if="it.status==6">退款中</view>
						<view class="type" v-else-if="it.status==7">退款被拒绝</view>
						<view class="type" v-else-if="it.status==8">已退款</view>
						<view class="type" v-else-if="it.status==9">已完成</view>
						<view class="order-info" v-for="(ite,indx) in it.content" :key="indx">
							<view class="left">
								<image :src="ite.image_url"></image>
							</view>
							<view class="right">
								<view class="name">
									{{ite.name}}
								</view>
								<view class="spec">{{ite.specs}}</view>
								<view class="price-number">
									￥<view class="price">{{ite.money}}</view>
									x<view class="number">{{ite.num}}</view>
								</view>
							</view>
						</view>
						<view class="detail">
							<view class="number">共{{it.total_num}}件商品</view><view class="sum">合计￥<view class="price">{{it.total_money}}</view></view><view class="nominal">(含运费 ￥{{it.deliver_money}})</view>
						</view>
						<view class="btns">
							<view class="default" v-if="it.status==1" @tap="order_info">取消订单</view>
							<view class="default" v-if="it.status==2" @tap="order_info">退款</view>
							<view class="default" v-if="it.status==3" @tap="order_info">退款/退货</view>
							<view class="pay" v-if="it.status==1" @tap="order_info">付款</view>
							<view class="pay" v-if="it.status==4" @tap="order_info">去评价</view>
						</view>
					</view>
				</view>
				<!--end 内容部分可直接删除-->
			</mescroll-uni>	
	</view>
</template>
<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import Order from './order-model.js'
	var order = new Order(); 
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				mescroll: null, //mescroll实例对象
				tabbar: ["全部", "待付款", "待发货", "待收货", "待评价", "退款/售后"],
				downOption:{},
				list:[],//所有数据
				winHeight: "", //窗口高度
				currentTab: 0, //预设当前项的值
				scrollLeft: 0, //tab标题的滚动条位置
				page:1,
				total:0
				
			}
		},
		onLoad: function(opation) {
			let that = this;
			//  高度自适应
			uni.getSystemInfo({
				success: function(res) {
					let calc = res.windowHeight;
					that.winHeight = calc;
				}
			});
			that.currentTab = opation.index || 0;
		},
		methods: {
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				try{
					var that = this;
					that.page = 1;
				} catch (e) {
					mescroll.endErr();
				}
				mescroll.resetUpScroll();
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
				var that = this;
				that.order_list((res)=>{
					mescroll.endBySize(res.data.length,res.total);
				})
			},
			//订单列表
			order_list(callback){
				var that = this;
				var type = that.currentTab;
				var page = that.page;
				order.order_list({type:type,page:page},(res)=>{
					if(res.code == 8888){
						if(res.data.current_page == 1){
							that.list = res.data.data;
							that.total = res.data.total;
						}else{
							for(var i=0;i<res.data.data.length;i++){
								that.list.push(res.data.data[i]);
							}
						}
					}
					if(callback){
						if(page < res.data.last_page){
							that.page = page + 1;
						}
						callback(res.data);
					}
				})
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				var that = this;
				let cur = e.currentTarget.dataset.current;
				if (that.currentTab == cur) {
					return false;
				} else {
					that.currentTab = cur
					that.page = 1;
					that.list = [];
					that.mescroll.triggerDownScroll();
				}
			},
			order_info(){
				order.show_tips({title:'正在开发中...'});
			}
		}
	}
</script>
<style>
	@import url("order.css");
</style>